<template>
  <div class="drug-use-deatil">
    <div class="use-deatil-head">
      <el-select 
        class="use-deatil-from"
        v-model="query.type"
        placeholder="出库方式"
        clearable
      >
        <template v-for="item in deliveryTypes">
          <el-option 
            :key="item.id" 
            :label="item.text" 
            :value="item.id">
          </el-option>
        </template>
      </el-select>
      <el-input
        class="use-deatil-from"
        v-model='query.docName'
        placeholder='操作人'
        clearable
      />
      <el-input
        class="use-deatil-from"
        v-model='query.patientName'
        placeholder='领用人'
        clearable
      />
      <span>出库时间：</span>
      <el-date-picker
        class="use-deatil-from datetime"
        v-model="query.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="onQuery"
        :clearable="false"
      >
      </el-date-picker>
      <el-button class="use-deatil-button" type="primary" @click="onQuery">搜索</el-button>
      <el-button @click="onRestQuery">清空</el-button>
    </div>
    <div class="use-deatil-button">
      <el-button
        class="use-deatil-button"
        @click="onExport"
        type="primary"
        plain
      >导出明细
      </el-button>
    </div>
    <el-table
      class="use-deatil-table"
      v-loading="loading"
      height="400"
      :data="data"
    >
      <el-table-column label="入库单号" prop="orderNo" width="160" />
      <el-table-column label="批次号" prop="batchNo" />
      <el-table-column label="出库方式" prop="deliveryType">
        <template v-slot="slot">
          <deliveryType :typeValue="slot.row.deliveryType"></deliveryType>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="quantity" />
      <el-table-column label="报损数量" prop="bs" />
      <el-table-column label="出库时间" prop="adjustTime" />
      <el-table-column label="操作人" prop="docName" />
      <el-table-column label="领用人" prop="patientName" />
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      class="use-deatil-pagination"
      :page-size="page.size"
      :total="page.total"
      :page-sizes="sizes"
      :current-page="page.current"
      @size-change="sizeChangeHandler"
      @current-change="pageChangeHandler"
    />
  </div>
</template>

<script>
import { getStockDetails, outStockDetails } from '@/api/storageRoom/drug';
import deliveryType from '../../drugDelivery/module/deliveryType';
import { mapGetters } from 'vuex';

export default {
  name: "useDetail",
  components: { deliveryType },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  computed: {
    ...mapGetters(["deliveryTypes", "sizes"]),
  },
  data() {
    return {
      query: {
        docName: null,
        patientName: null,
        time: null,
        type: null
      },
      page: {
        size: 10,
        total: 0,
        current: 1
      },
      data: [],
      loading: false
    };
  },
  created() {
    this._resetDate();
    this.onQuery();
  },
  methods: {
    onQuery() {
      let data = {
        docName: this.query.docName,	
        drugId: this.id,	
        endDate: null,	
        page: this.page.current - 1,	
        size: this.page.size,	
        startDate: null,	
        userName: this.query.patientName,
        sort: "adjust_time,desc",
        type: this.query.type
      };
      if(this.query.time && this.query.time.length) {
        data.startDate = this.query.time[0] + ' 00:00:00';
        data.endDate = this.query.time[1] + ' 23:59:59';
      }
      getStockDetails(data).then(res => {
        this.data = res.content;
        this.page.total = res.totalElements;
      });
    },
    onRestQuery() {
      this.query.patientName = null;
      this.query.docName = null;
      this.query.type = null;
      this._resetDate();
      this.onQuery();
    },
    sizeChangeHandler(size) {
      this.page.size = size;
      this.onQuery();
    },
    pageChangeHandler(current) {
      this.page.current = current;
      this.onQuery();
    },
    onExport() {
      let data = {
        docName: this.query.docName,	
        drugId: this.id,	
        endDate: null,	
        startDate: null,	
        userName: this.query.patientName,
        type: this.query.type
      };
      if(this.query.time && this.query.time.length) {
        data.startDate = this.query.time[0] + ' 00:00:00';
        data.endDate = this.query.time[1] + ' 23:59:59';
      }
      outStockDetails(data);
    },
    _resetDate() {
      let startDate = new Date(Date.now() - 3600 * 1000 * 24 * 30);
      let endDate = new Date();
      this.query.time = [
        this._dateToString(startDate),
        this._dateToString(endDate),
      ];
    },
    _dateToString(date) {
      return date.getFullYear() + "-" + (date.getMonth()> 8 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1)) + "-" +(date.getDate() > 8 ? (date.getDate()) : "0" + (date.getDate()));
    }
  }
}
</script>

<style lang="scss" scoped>
.drug-use-deatil {
  .use-deatil-head {
    .use-deatil-from {
      margin-right: 10px;
      width: 120px;

      &.datetime {
        width: 245px;

        /deep/ .el-range-separator {
          width: 20px;
        }
      }
    }
    .use-deatil-button {
      margin-right: 5px;
    }
  }

  .use-deatil-table {
    margin-top: 10px;
    width: 100%;
  }

  .use-deatil-pagination {
    margin-top: 10px;
  }

  .use-deatil-button {
    margin-top: 10px;
  }
}
</style>